<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Nodes documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
      smoothScroll.init();
    </script>

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - nodes</h1>

      <p>
        Handles the creation and deletion of nodes and contains the global node
        options and styles.
      </p>
      <h3>Options</h3>
      <p>
        The options for the nodes have to be contained in an object titled
        'nodes'. All of these options can be supplied per node as well.
        Obviously, 'id' should not be defined globally but per node. Options
        defined in the global nodes object, are applied to all nodes. If a node
        has options of its own, those will be used instead of the global
        options.
      </p>
      <p>
        <b
          ><i
            >When you have given a node an option, you will override the global
            option for that property, and also the group option for that
            property if the node is in a group. If you then set that option to
            <code>null</code>, it will revert back to the default value.</i
          ></b
        >
      </p>
      <p>
        Click on the full options or shorthand options to show how these options
        are supposed to be used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">full options</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="shortOptions"
        >
          <a href="#">shorthand options</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  nodes:{
    borderWidth: 1,
    borderWidthSelected: 2,
    brokenImage:undefined,
    chosen: true,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    opacity: 1,
    fixed: {
      x:false,
      y:false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'center',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    group: undefined,
    heightConstraint: false,
    hidden: false,
    icon: {
      face: 'FontAwesome',
      code: undefined,
      weight: undefined,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    imagePadding: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    label: undefined,
    labelHighlightBold: true,
    level: undefined,
    mass: 1,
    physics: true,
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          let scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    shape: 'ellipse',
    shapeProperties: {
      borderDashes: false, // only for borders
      borderRadius: 6,     // only for box shape
      interpolation: false,  // only for image and circularImage shapes
      useImageSize: false,  // only for image and circularImage shapes
      useBorderWithImage: false,  // only for image shape
      coordinateOrigin: 'center'  // only for image and circularImage shapes
    }
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);
</pre
      >

      <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
  nodes:{
    color: '#ff0000',
    fixed: false,
    font: '12px arial red',
    scaling: {
      label: true
    },
    shadow: true
  }
}
network.setOptions(options);
</pre
      >

      <p>
        These options can also be set per individual node. All of the individual
        options are explained here:
      </p>
      <table class="options" id="optionTable">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>borderWidth</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>The width of the border of the node.</td>
        </tr>
        <tr>
          <td>borderWidthSelected</td>
          <td>Number</td>
          <td><code>2</code></td>
          <td>
            The width of the border of the node when it is selected. When
            undefined, the borderWidth * 2 is used.
          </td>
        </tr>
        <tr>
          <td>brokenImage</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            When the shape is set to <code>image</code> or
            <code>circularImage</code>, this option can be an URL to a backup
            image in case the URL supplied in the image option cannot be
            resolved.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','chosen', this);"
        >
          <td><span parent="chosen" class="right-caret"></span> chosen</td>
          <td>Object or Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, selecting or hovering on a node will change it and its
            label's characteristics according to the default. When false, no
            change to the node or its label will occur when the node is chosen.
            If an object is supplied, finer-grained adjustment of node and label
            characteristics is available when a node is chosen.
          </td>
        </tr>
        <tr parent="chosen" class="hidden">
          <td class="indent">chosen.node</td>
          <td>Function or Boolean</td>
          <td>undefined</td>
          <td>
            When true, selecting or hovering on a node will change its
            characteristics according to the default. When false, no change to
            the node will occur when the node is chosen.
            <p>
              If a function is supplied, it is called when the node is chosen.
            </p>
            <pre class="code">
  function(values, id, selected, hovering) {
    values.<i>property</i> = <i>chosenValue</i>;
  }</pre
            >
            <p>
              Any of the incoming arguments may be used to determine
              characteristic changes. If a property is not specifically assigned
              by the supplied function, it will be left unchanged. A specific
              function may be assigned to each particular node in its options,
              or to all in the network's <code>nodes</code> options.
            </p>
            <p>
              The properties define the characteristics that can be changed as
              follows:
            </p>
            <table>
              <tr>
                <th>Property</th>
                <th>Node Reference</th>
              </tr>
              <tr>
                <td>color</td>
                <td>see color.background</td>
              </tr>
              <tr>
                <td>borderWidth</td>
                <td>see borderWidth</td>
              </tr>
              <tr>
                <td>borderColor</td>
                <td>see color.border</td>
              </tr>
              <tr>
                <td>size</td>
                <td>see size</td>
              </tr>
              <tr>
                <td>borderDashes</td>
                <td>see shapeProperties.borderDashes</td>
              </tr>
              <tr>
                <td>borderRadius</td>
                <td>see shapeProperties.borderRadius</td>
              </tr>
              <tr>
                <td>shadow</td>
                <td>see shadow.enabled</td>
              </tr>
              <tr>
                <td>shadowColor</td>
                <td>see shadow.color</td>
              </tr>
              <tr>
                <td>shadowSize</td>
                <td>see shadow.size</td>
              </tr>
              <tr>
                <td>shadowX</td>
                <td>see shadow.x</td>
              </tr>
              <tr>
                <td>shadowY</td>
                <td>see shadow.y</td>
              </tr>
            </table>
            <br />
          </td>
        </tr>
        <tr parent="chosen" class="hidden">
          <td class="indent">chosen.label</td>
          <td>Function or Boolean</td>
          <td>undefined</td>
          <td>
            When true, selecting or hovering on a node will change its label's
            characteristics according to the default. When false, no change to
            the node's label will occur when the node is chosen.
            <p>
              If a function is supplied, it is called when the node is chosen.
            </p>
            <pre class="code">
  function(values, id, selected, hovering) {
    values.<i>property</i> = <i>chosenValue</i>;
  }</pre
            >
            <p>
              Any of the incoming arguments may be used to determine
              characteristic changes. If a property is not specifically assigned
              by the supplied function, it will be left unchanged. A specific
              function may be assigned to each particular node in its options,
              or to all in the network's <code>nodes</code> options.
            </p>
            <p>
              The properties define the characteristics that can be changed as
              follows:
            </p>
            <table>
              <tr>
                <th>Property</th>
                <th>Node Reference</th>
              </tr>
              <tr>
                <td>color</td>
                <td>see font.color</td>
              </tr>
              <tr>
                <td>size</td>
                <td>see font.size</td>
              </tr>
              <tr>
                <td>face</td>
                <td>see font.face</td>
              </tr>
              <tr>
                <td>mod</td>
                <td>font modifier ('bold', 'italic', etc.)</td>
              </tr>
              <tr>
                <td>vadjust</td>
                <td>see font.vadjust</td>
              </tr>
              <tr>
                <td>strokeWidth</td>
                <td>see font.strokeWidth</td>
              </tr>
              <tr>
                <td>strokeColor</td>
                <td>see font.strokeColor</td>
              </tr>
            </table>
            <br />
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','color', this);"
        >
          <td><span parent="color" class="right-caret"></span> color</td>
          <td>Object or String</td>
          <td><code>Object</code></td>
          <td>
            The color object contains the color information of the node in every
            situation. When the node only needs a single color, a color value
            like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or
            <code>'red'</code>
            can be supplied instead of an object.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.border</td>
          <td>String</td>
          <td><code>'#2B7CE9'</code></td>
          <td>
            The color of the border of the node when it is not selected or
            hovered over
            <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.background</td>
          <td>String</td>
          <td><code>'#D2E5FF'</code></td>
          <td>
            The color of the background of the node when it is not selected or
            hovered over
            <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.highlight</td>
          <td>Object or String</td>
          <td><code>Object</code></td>
          <td>
            The color of the node when it is selected. Alternatively, you can
            just supply a string color value.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent2">color.highlight.border</td>
          <td>String</td>
          <td><code>'#2B7CE9'</code></td>
          <td>The color of the border of the node when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent2">color.highlight.background</td>
          <td>String</td>
          <td><code>'#D2E5FF'</code></td>
          <td>The color of the background of the node when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.hover</td>
          <td>Object or String</td>
          <td><code>Object</code></td>
          <td>
            The color of the node when the mouse hovers over it
            <i>(assuming hover is enabled in the interaction module)</i>.
            Shorthand like above is also supported.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent2">color.hover.border</td>
          <td>String</td>
          <td><code>'#2B7CE9'</code></td>
          <td>
            The color of the border of the node when the mouse hovers over it
            <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent2">color.hover.background</td>
          <td>String</td>
          <td><code>'#D2E5FF'</code></td>
          <td>
            The color of the background of the node when the mouse hovers over
            it <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr>
          <td>ctxRenderer</td>
          <td>Function</td>
          <td><code>undefined</code></td>
          <td>
            <p>The function inputs and outputs look like:</p>
            <pre class="code">
function ctxRenderer({ ctx, id, x, y, state: { selected, hover }, style, label }) {
  // do some math here
  return {
    // bellow arrows
    // primarily meant for nodes and the labels inside of their boundaries
    drawNode() {
      ctx.drawSomeNode();
    },
    // above arrows
    // primarily meant for labels outside of the node
    drawExternalLabel() {
      ctx.drawSomeTextOutsideOfTheNode();
    },
    // node dimensions defined by node drawing
    nodeDimensions: { width, height },
  };
}
                </pre
            >
            <p>
              This function allows to draw any canvas shapes and lines (see
              guide to how to draw shapes
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes"
                >here</a
              >). This property is used only when the property
              <code>shape</code> is <code>'custom'</code>.
            </p>
            example:
            <pre class="code">
function({ ctx, x, y, state: { selected, hover }, style }) {
    const r = style.size;
    ctx.beginPath();
    const sides = 6;
    const a = (Math.PI * 2) / sides;
    ctx.moveTo(x , y + r);
    for (let i = 1; i < sides; i++) {
        ctx.lineTo(x + r * Math.sin(a * i), y + r * Math.cos(a * i));
    }
    ctx.closePath();
    ctx.save();
    ctx.fillStyle = 'red';
    ctx.fill(); 
    ctx.stroke();
    ctx.restore();

    ctx.font = "normal 12px sans-serif";
    ctx.fillStyle = 'black';
}
                </pre
            >
          </td>
        </tr>
        <tr>
          <td>opacity</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            Overall opacity of a node
            <i
              >(overrides any opacity on border, background, image, and
              shadow)</i
            >
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','fixed', this);"
        >
          <td><span parent="fixed" class="right-caret"></span> fixed</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the node will not move but IS part of the physics
            simulation. When defined as an object, movement in either X or Y
            direction can be disabled.
          </td>
        </tr>
        <tr parent="fixed" class="hidden">
          <td class="indent">fixed.x</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>When true, the node will not move in the X direction.</td>
        </tr>
        <tr parent="fixed" class="hidden">
          <td class="indent">fixed.y</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>When true, the node will not move in the Y direction.</td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','font', this);"
        >
          <td><span parent="font" class="right-caret"></span> font</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the label. A shorthand is also
            supported in the form <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>Color of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>Size of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>Font face (or font family) of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.background</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            When not <code>undefined</code> but a <b>color string</b>, a
            background rectangle will be drawn behind the label in the supplied
            color.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.strokeWidth</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            As an alternative to the background rectangle, a stroke can be drawn
            around the text. When a value higher than 0 is supplied, the stroke
            will be drawn.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.strokeColor</td>
          <td>String</td>
          <td><code>'#ffffff'</code></td>
          <td>
            This is the color of the stroke
            <i>assuming the value for stroke is higher than 0</i>.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.align</td>
          <td>String</td>
          <td><code>'center'</code></td>
          <td>
            This can be set to 'left' to make the label left-aligned. Otherwise,
            defaults to 'center'.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the base
            font in the label text. (Positive is down.)
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.multi</td>
          <td>Boolean or String</td>
          <td><code>false</code></td>
          <td>
            If <code>false</code>, the label is treated as pure text drawn with
            the base font. If <code>true</code> or <code>'html'</code> the label
            may be multifonted, with bold, italic and code markup, interpreted
            as html. If the value is <code>'markdown'</code> or
            <code>'md'</code> the label may be multifonted, with bold, italic
            and code markup, interpreted as markdown. The bold, italic,
            bold-italic and monospaced fonts may be set up under in the
            font.bold, font.ital, font.boldital and font.mono properties,
            respectively.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','bold', this);"
        >
          <td><span parent="bold" class="right-caret"></span> font.bold</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the bold font in the label. A
            shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the bold font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the bold font in the label text. Defaults to the base font's
            size.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the bold font in the label text.
            Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.mod</td>
          <td>String</td>
          <td><code>'bold'</code></td>
          <td>
            A string added to the face and size when determining the bold font
            in the label text.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the bold
            font in the label text. (Positive is down.) Defaults to the base
            font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','ital', this);"
        >
          <td><span parent="ital" class="right-caret"></span> font.ital</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the italic font in the label. A
            shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the italic font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the italic font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the italic font in the label text.
            Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.mod</td>
          <td>String</td>
          <td><code>'italic'</code></td>
          <td>
            A string added to the face and size when determining the italic font
            in the label text.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the italic
            font in the label text. (Positive is down.) Defaults to the base
            font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','boldital', this);"
        >
          <td>
            <span parent="boldital" class="right-caret"></span> font.boldital
          </td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the bold italic font in the
            label. A shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the bold italic font in the label text. Defaults to the
            base font's color.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the bold italic font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the bold italic font in the label
            text. Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.mod</td>
          <td>String</td>
          <td><code>'bold'</code></td>
          <td>
            A string added to the face and size when determining the bold italic
            font in the label text.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the bold
            italic font in the label text. (Positive is down.) Defaults to the
            base font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','mono', this);"
        >
          <td><span parent="mono" class="right-caret"></span> font.mono</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the monospaced font in the label.
            A shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'15px courier red'</code>.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the monospaced font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.size</td>
          <td>Number</td>
          <td><code>15</code></td>
          <td>
            Size of the monospaced font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.face</td>
          <td>String</td>
          <td><code>'courier new'</code></td>
          <td>
            Font face (or font family) of the monospaced font in the label text.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.mod</td>
          <td>String</td>
          <td><code>''</code></td>
          <td>
            A string added to the face and size when determining the monospaced
            font in the label text.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.vadjust</td>
          <td>Number</td>
          <td><code>2</code></td>
          <td>
            A font-specific correction to the vertical positioning of the
            monospaced font in the label text. (Positive is down.) Defaults to
            the base font's valign.
          </td>
        </tr>
        <tr>
          <td>group</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            When not <code>undefined</code>, the node will belong to the defined
            group. Styling information of that group will apply to this node.
            Node specific styling overrides group styling.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','heightConstraint', this);"
        >
          <td>
            <span parent="heightConstraint" class="right-caret"></span>
            heightConstraint
          </td>
          <td>Number, Boolean or Object</td>
          <td><code>false</code></td>
          <td>
            If false, no heightConstraint is applied. If a number is specified,
            the value is used as the minimum height of the node. The node's
            height will be set to the minimum if less than the value.
          </td>
        </tr>
        <tr parent="heightConstraint" class="hidden">
          <td class="indent">heightConstraint.minimum</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            If a number is specified, the value is used as the minimum height of
            the node. The node's height will be set to the minimum if less than
            the value.
          </td>
        </tr>
        <tr parent="heightConstraint" class="hidden">
          <td class="indent">heightConstraint.valign</td>
          <td>String</td>
          <td><code>'middle'</code></td>
          <td>
            Valid values are <code>'top'</code>, <code>'middle'</code>, and
            <code>'bottom'</code>. When specified, if the height of the label
            text is less than the minimum (including any top or bottom margins),
            it will be offset vertically to the designated position.
          </td>
        </tr>
        <tr>
          <td>hidden</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the node will not be shown. It will still be part of the
            physics simulation though!
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','icon', this);"
        >
          <td><span parent="icon" class="right-caret"></span> icon</td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            These options are only used when the shape is set to
            <code>icon</code>.
          </td>
        </tr>
        <tr parent="icon" class="hidden">
          <td class="indent">icon.face</td>
          <td>String</td>
          <td><code>'FontAwesome'</code></td>
          <td>
            These options are only used when the shape is set to
            <code>icon</code>. The possible values for the face option are any
            font faces that are loaded on given page such as
            <code>'FontAwesome'</code> or <code>'Ionicons'</code>.
          </td>
        </tr>
        <tr parent="icon" class="hidden">
          <td class="indent">icon.code</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            This is the code of the icon, for example <code>'\uf007'</code>.
          </td>
        </tr>
        <tr parent="icon" class="hidden">
          <td class="indent">icon.size</td>
          <td>Number</td>
          <td><code>50</code></td>
          <td>The size of the icon.</td>
        </tr>
        <tr parent="icon" class="hidden">
          <td class="indent">icon.color</td>
          <td>String</td>
          <td><code>'#2B7CE9'</code></td>
          <td>The color of the icon.</td>
        </tr>
        <tr parent="icon" class="hidden">
          <td class="indent">icon.weight</td>
          <td>Number or String</td>
          <td><code>undefined</code></td>
          <td>
            This allows for weight to be forced regardless of selection status.
            For example Font Awesome 5 doesn't work properly unless weight is
            forced to <code>'bold'</code> or <code>700</code>. If this option is
            set then selection is indicated by bigger size instead of bold font
            face.
          </td>
        </tr>
        <tr>
          <td>id</td>
          <td>Number or String</td>
          <td><code>undefined</code></td>
          <td>
            The id of the node. The id is mandatory for nodes and they have to
            be unique. This should obviously be set per node, not globally.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','image', this);"
        >
          <td><span parent="image" class="right-caret"></span> image</td>
          <td>Object or String</td>
          <td><code>undefined</code></td>
          <td>
            When the shape is set to <code>image</code> or
            <code>circularImage</code>, this option should be the URL to an
            image. If the image cannot be found, the brokenImage option can be
            used. <br /><i
              >Note: Firefox has a
              <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=700533"
                >SVG drawing bug</a
              >, there is a
              <a href="https://stackoverflow.com/a/28692538/469898"
                >workaround</a
              >
              - add width/height attributes to root &lt;svg&gt; element of the
              SVG</i
            >.
          </td>
        </tr>
        <tr parent="image" class="hidden">
          <td class="indent">image.unselected</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>Unselected (default) image URL.</td>
        </tr>
        <tr parent="image" class="hidden">
          <td class="indent">image.selected</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>Selected image URL.</td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','imagePadding', this);"
        >
          <td>
            <span parent="imagePadding" class="right-caret"></span> imagePadding
          </td>
          <td>Object or Number</td>
          <td><code>0</code></td>
          <td>
            If a number is specified, the paddings of the image inside the shape
            are set to that value on all sides. These options are only used when
            the shape is set to <code>image</code>, <code>circularImage</code>.
          </td>
        </tr>
        <tr parent="imagePadding" class="hidden">
          <td class="indent">imagePadding.top</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The top padding of the image inside the shape is set to this value.
          </td>
        </tr>
        <tr parent="imagePadding" class="hidden">
          <td class="indent">imagePadding.right</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The right margin of the image inside the shape is set to this value.
          </td>
        </tr>
        <tr parent="imagePadding" class="hidden">
          <td class="indent">imagePadding.bottom</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The bottom margin of the image inside the shape is set to this
            value.
          </td>
        </tr>
        <tr parent="imagePadding" class="hidden">
          <td class="indent">imagePadding.left</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            The left margin of the image inside the shape is set to this value.
          </td>
        </tr>
        <tr>
          <td>label</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            The label is the piece of text shown in or under the node, depending
            on the shape.
          </td>
        </tr>
        <tr>
          <td>labelHighlightBold</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Determines whether or not the label becomes bold when the node is
            selected.
          </td>
        </tr>
        <tr>
          <td>level</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            When using the hierarchical layout, the level determines where the
            node is going to be positioned.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','margin', this);"
        >
          <td><span parent="margin" class="right-caret"></span> margin</td>
          <td>Object or Number</td>
          <td><code>5</code></td>
          <td>
            If a number is specified, the margins of the label are set to that
            value on all sides. These options are only used when the shape is
            set to <code>box</code>, <code>circle</code>, <code>database</code>,
            <code>icon</code> or <code>text</code>.
          </td>
        </tr>
        <tr parent="margin" class="hidden">
          <td class="indent">margin.top</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The top margin of the label is set to this value.</td>
        </tr>
        <tr parent="margin" class="hidden">
          <td class="indent">margin.right</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The right margin of the label is set to this value.</td>
        </tr>
        <tr parent="margin" class="hidden">
          <td class="indent">margin.bottom</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The bottom margin of the label is set to this value.</td>
        </tr>
        <tr parent="margin" class="hidden">
          <td class="indent">margin.left</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The left margin of the label is set to this value.</td>
        </tr>
        <tr>
          <td>mass</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>
            The barnesHut physics model (which is enabled by default) is based
            on an inverted gravity model. By increasing the mass of a node, you
            increase it's repulsion. <br /><br />
            Values between 0 and 1 are not recommended.<br />
            Negative or zero values are not allowed. These will generate a
            console error and will be set to 1.
          </td>
        </tr>
        <tr>
          <td>physics</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When false, the node is not part of the physics simulation. It will
            not move except for from manual dragging.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','scaling', this);"
        >
          <td><span parent="scaling" class="right-caret"></span> scaling</td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            If the <code>value</code> option is specified, the size of the nodes
            will be scaled according to the properties in this object. All node
            shapes can be scaled, but some only when label scaling is enabled as
            their size is based on the size of the label. Only scalable when
            label scaling is enabled are: <code>ellipse</code>,
            <code>circle</code>, <code>database</code>, <code>box</code>,
            <code>text</code>. Always scalable are: <code>image</code>,
            <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
            <code>star</code>, <code>triangle</code>, <code>triangleDown</code>,
            <code>hexagon</code>, <code>square</code> and <code>icon</code>.
            Keep in mind that when using scaling, the <code>size</code> option
            is neglected.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.min</td>
          <td>Number</td>
          <td><code>10</code></td>
          <td>
            If nodes have a value, their sizes are determined by the value, the
            scaling function and the min max values. The min value is the
            minimum allowed value.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.max</td>
          <td>Number</td>
          <td><code>30</code></td>
          <td>
            This is the maximum allowed size when the nodes are scaled using the
            value option.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.label</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            This can be false if the label is not allowed to scale with the
            node. If true it will scale using default settings. For further
            customization, you can supply an object.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the scaling of the label on or off. If this option is not
            defined, it is set to true if any of the properties in this object
            are defined.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.min</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>The minimum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.max</td>
          <td>Number</td>
          <td><code>30</code></td>
          <td>The maximum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.maxVisible</td>
          <td>Number</td>
          <td><code>30</code></td>
          <td>
            When zooming in, the font is drawn larger as well. You can limit the
            perceived font size using this option. If set to 30, the font will
            never look larger than size 30 zoomed at 100%.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.drawThreshold</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>
            When zooming out, the font will be drawn smaller. This defines a
            lower limit for when the font is drawn. When using font scaling, you
            can use this together with the maxVisible to first show labels of
            important nodes when zoomed out and only show the rest when zooming
            in.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.customScalingFunction</td>
          <td>Function</td>
          <td>in description</td>
          <td>
            If nodes have <code>value</code> fields, this function determines
            how the size of the nodes are scaled based on their values. The
            default function is:
            <pre>
function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
}
</pre
            >
            The function receives the minimum value of the set, the maximum
            value, the total sum of all values and finally the value of the node
            or edge it works on.
            <b>It has to return a value between 0 and 1.</b> The nodes and edges
            then calculate their size as follows:
            <pre>
var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;
</pre
            >
            Please note: <code>maxSize</code> and <code>minSize</code> are the
            values <code>scaling.max</code> and
            <code>scaling.min</code> provided in the options.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','shadow', this);"
        >
          <td><span parent="shadow" class="right-caret"></span> shadow</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the node casts a shadow using the default settings. This
            can be further refined by supplying an object.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the casting of shadows. If this option is not defined, it is
            set to true if any of the properties in this object are defined.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.color</td>
          <td>String</td>
          <td><code>'rgba(0,0,0,0.5)'</code></td>
          <td>
            The color size of the shadow as a string. Supported formats are
            'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.size</td>
          <td>Number</td>
          <td><code>10</code></td>
          <td>The blur size of the shadow.</td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.x</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The x offset.</td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.y</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The y offset.</td>
        </tr>
        <tr>
          <td>shape</td>
          <td>String</td>
          <td><code>'ellipse'</code></td>
          <td>
            <p>
              The shape defines what the node looks like. There are three types
              of nodes. One type has the label inside of it and the other type
              has the label underneath it. The third type is a custom shape you
              can draw whatever you want to represent the node.
            </p>
            <p>
              The types with the label inside of it are:
              <code>ellipse</code>, <code>circle</code>, <code>database</code>,
              <code>box</code>, <code>text</code>.
            </p>
            <p>
              The ones with the label outside of it are: <code>image</code>,
              <code>circularImage</code>, <code>diamond</code>,
              <code>dot</code>, <code>star</code>, <code>triangle</code>,
              <code>triangleDown</code>, <code>hexagon</code>,
              <code>square</code> and <code>icon</code>.
            </p>
            <p>
              If none of these shapes suffice, you can use the
              <code>custom</code> shape which will allow you to create your own
              shape rendered via <code>ctxRenderer</code> option.
            </p>
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','shapeProperties', this);"
        >
          <td>
            <span parent="shapeProperties" class="right-caret"></span>
            shapeProperties
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>This object contains configuration for specific shapes.</td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.borderDashes</td>
          <td>Array or Boolean</td>
          <td><code>false</code></td>
          <td>
            This property applies to all shapes that have borders. You set the
            dashes by supplying an Array. Array format: [dash length, gap
            length]. You can also use a Boolean, false is disable and true is
            default [5,15].
          </td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.borderRadius</td>
          <td>Number</td>
          <td><code>6</code></td>
          <td>
            This property is used only for the <code>box</code> shape. It allows
            you to determine the roundness of the corners of the shape.
          </td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.interpolation</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            This property only applies to the <code>image</code> and
            <code>circularImage</code> shapes. When true, the image is resampled
            when scaled down, resulting in a nicer image at the cost of
            computational time.
          </td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.useImageSize</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            This property only applies to the <code>image</code> and
            <code>circularImage</code> shapes. When false, the size option is
            used, when true, the size of the image is used. <br /><i
              ><b>Important</b>: if this is set to true, the image cannot be
              scaled with the value option!</i
            >
          </td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.useBorderWithImage</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            This property only applies to the <code>image</code> shape. When
            true, the color object is used. A rectangle with the background
            color is drawn behind it and it has a border. This means all border
            options are taken into account.
          </td>
        </tr>
        <tr parent="shapeProperties" class="hidden">
          <td class="indent">shapeProperties.coordinateOrigin</td>
          <td>String</td>
          <td><code>'center'</code></td>
          <td>
            This property only applies to the <code>image</code> and
            <code>circularImage</code> shapes. Decides if the (x, y) of the node
            will be the <code>center</code> of the image, or the
            <code>top-left</code> corner.
          </td>
        </tr>
        <tr>
          <td>size</td>
          <td>Number</td>
          <td><code>25</code></td>
          <td>
            The size is used to determine the size of node shapes that do not
            have the label inside of them. These shapes are: <code>image</code>,
            <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
            <code>star</code>, <code>triangle</code>, <code>triangleDown</code>,
            <code>hexagon</code>, <code>square</code> and <code>icon</code>
          </td>
        </tr>
        <tr>
          <td>title</td>
          <td>String or Element</td>
          <td><code>undefined</code></td>
          <td>
            Title to be displayed in a pop-up when the user hovers over the
            node. The title can be an HTML element or a string containing plain
            text. See
            <a href="../../examples/network/other/html-in-titles.html"
              >HTML in titles example</a
            >
            if you want to parse HTML.
          </td>
        </tr>
        <tr>
          <td>value</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            When a value is set, the nodes will be scaled using the options in
            the scaling object defined above.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','widthConstraint', this);"
        >
          <td>
            <span parent="widthConstraint" class="right-caret"></span>
            widthConstraint
          </td>
          <td>Number, Boolean or Object</td>
          <td><code>false</code></td>
          <td>
            If false, no widthConstraint is applied. If a number is specified,
            the minimum and maximum widths of the node are set to the value. The
            node's label's lines will be broken on spaces to stay below the
            maximum and the node's width will be set to the minimum if less than
            the value.
          </td>
        </tr>
        <tr parent="widthConstraint" class="hidden">
          <td class="indent">widthConstraint.minimum</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            If a number is specified, the minimum width of the node is set to
            the value. The node's width will be set to the minimum if less than
            the value.
          </td>
        </tr>
        <tr parent="widthConstraint" class="hidden">
          <td class="indent">widthConstraint.maximum</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            If a number is specified, the maximum width of the node is set to
            the value. The node's label's lines will be broken on spaces to stay
            below the maximum.
          </td>
        </tr>
        <tr>
          <td>x</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            This gives a node its initial position on the x axis. When using
            hierarchical layout, this value has no effect. When using
            stabilization, the stabilized position may be different from the
            initial one (the node will start at this position but may move to
            different location based on the stabilization configuration). To
            lock the node to this position, turn off physics or set
            <code>fixed.x</code> node option to true.
          </td>
        </tr>
        <tr>
          <td>y</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            This gives a node its initial position on the y axis. When using
            hierarchical layout, this value has no effect. When using
            stabilization, the stabilized position may be different from the
            initial one (the node will start at this position but may move to
            different location based on the stabilization configuration). To
            lock the node to this position, turn off physics or set
            <code>fixed.y</code> node option to true.
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/nodes.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/nodes.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
